<template>
  <h1 class="row-title">不同方向(hover)</h1>
  <div class="row">
    <Duyi-Tooltip
      content="this is a test"
      placement="top"
      @visible-change="handle"
    >
      <Duyi-Button type="primary">top</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip content="this is a test" placement="bottom">
      <Duyi-Button type="success">bottom</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip content="this is a test" placement="left">
      <Duyi-Button type="warning">left</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip content="this is a test" placement="right">
      <Duyi-Button type="danger">right</Duyi-Button>
    </Duyi-Tooltip>
  </div>
  <h1 class="row-title">切换触发模式(click)</h1>
  <div class="row">
    <Duyi-Tooltip content="this is a test" placement="top" trigger="click">
      <Duyi-Button type="primary">top</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip content="this is a test" placement="bottom" trigger="click">
      <Duyi-Button type="warning">bottom</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip content="this is a test" placement="left" trigger="click">
      <Duyi-Button type="danger">left</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip content="this is a test" placement="right" trigger="click">
      <Duyi-Button type="success">right</Duyi-Button>
    </Duyi-Tooltip>
  </div>
  <h1 class="row-title">手动触发模式</h1>
  <div class="row">
    <Duyi-Tooltip
      content="this is a test"
      placement="right"
      manual
      ref="tooltipRef"
    >
      <Duyi-Button type="primary">right</Duyi-Button>
    </Duyi-Tooltip>
  </div>
  <div class="row">
    <Duyi-Button @click="openHandler">打开提示框</Duyi-Button>
    <Duyi-Button @click="closeHandler">关闭提示框</Duyi-Button>
  </div>
  <h1 class="row-title">延时触发</h1>
  <div class="row">
    <Duyi-Tooltip
      content="this is a test"
      placement="top"
      :open-delay="2000"
      :close-delay="2000"
      @visible-change="handle"
    >
      <Duyi-Button type="primary">top</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip
      content="this is a test"
      placement="bottom"
      :open-delay="2000"
      :close-delay="2000"
    >
      <Duyi-Button type="warning">bottom</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip
      content="this is a test"
      placement="left"
      :open-delay="2000"
      :close-delay="2000"
    >
      <Duyi-Button type="danger">left</Duyi-Button>
    </Duyi-Tooltip>
    <Duyi-Tooltip
      content="this is a test"
      placement="right"
      :open-delay="2000"
      :close-delay="2000"
    >
      <Duyi-Button type="success">right</Duyi-Button>
    </Duyi-Tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 组件实例
const tooltipRef = ref(null)
// visible-change事件处理函数
const handle = isShow => {
  console.log(isShow)
}

// 手动触发需要修改 isOpen 属性的是，拿到组件实例，调用实例的open或close方法
const openHandler = () => {
  tooltipRef.value.show()
}
const closeHandler = () => {
  tooltipRef.value.hide()
}
</script>

<style lang="scss" scoped></style>
